<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <!-- 远程引入 -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> -->
<!-- 在线引入 -->
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
  <script src="bootstrap-4.5.0-dist/js/bootstrap.js"></script>
<style>
  .zsgc{
    width: auto;
  }
  .head{
    width: 100%;
    height: 100px;
    background-color: #bed2b7;}
    h1{
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    font-family: '微软雅黑','Times New Roman', Times, serif;
    padding-top: 30px;
  }
    .content-left{
      /* width: 150px;
      height:400px;
      margin-left: 30px;
      margin-top: 4px; */
      width: 220px;
			background-color: #ffffff;
			float: left;
			font-size: 24px;
    }
    .content-right{
      width: 1000px;
      margin-top: 4px;
      margin-left: 30px;
    }
    .content-left ,.content-right{
      float: left;
    }
    img{
      width: 20px;
      height: 20px;
    }
    .list-group-item:hover{
      background-color: rgb(170, 245, 186);
    }
    .table td {
	    border: 1px solid #ededed;
	    line-height: 2em;
    }
    .content-left,.content-right{
      background-color: bisque;
    }
</style>
</head>
<body>
      <div class="zsgc">
        <div class="head"><h1>星巴克招募伙伴-后台管理系统</h1></div>
        <div class="content-left">
          <ul class="list-group list-group-flush">
            <li class="list-group-item"><a href="./练习.html">职位管理系统</a></li>
            <li class="list-group-item"><a href="./door.html">门店管理系统</a></li>
          </ul>
        </div>
        <div class="content-right">
          <div class="btn">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  添加
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">提示</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        你确定要添加对象吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  批量删除
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">提示</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        你确定要删除吗
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>
          </div>
          <table class="table">
              <tr>
                <td></td>
                <td>工作时间</td>
                <td>工作性质</td>
                <td>工作地点</td>
                <td>工作职位</td>
                <td>操作</td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>做一休一</td>
                <td>全职</td>
                <td>上海</td>
                <td>品类经理</td>
                <td>
                  <img src="./img/icon_5smwgplxt32/shanchu.png" alt="删除">
                  <img src="./img/icon_5smwgplxt32/xiugai.png" alt="修改">
                </td>
              </tr>
          </table>
        </div>
      </div>
</body>
</html>